<template>
	<div id="app">
		<el-container>
			<el-main>
				<el-form :inline="true" :model="drugForm" :rules="rulesDrugForm" ref="drugForm" class="demo-form-inline">
					<el-row>
						<el-col :span="7">
							<el-form-item label="药品编码"><br>
								<el-input v-model="drugForm.drugnumber" disabled style="width: 250px;margin-left: -70px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="药品名称" prop="name"><br>
								<el-input v-model="drugForm.name" style="width: 250px;margin-left: -70px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="药品规格" prop="specification"><br>
								<el-input v-model="drugForm.specification" style="width: 250px;margin-left: -70px;"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label="药品类别" prop="drugtypeId"><br>
								<el-select v-model="drugForm.drugtypeId" placeholder="请选择" style="width: 250px;margin-left: -70px;">
									<!-- <el-option label="全部" value=""></el-option> -->
									<el-option v-for="drugtype in drugtypeList" :key="drugtype.id" :label="drugtype.name" :value="drugtype.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="采购价" prop="inprice"><br>
								<el-input v-model="drugForm.inprice" style="width: 250px;margin-left: -60px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="零售价" prop="outprice"><br>
								<el-input v-model="drugForm.outprice" style="width: 250px;margin-left: -60px;"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="7">
							<el-form-item label="生产厂家" prop="venderId"><br>
								<el-select v-model="drugForm.venderId" placeholder="请选择" style="width: 250px;margin-left: -70px;">
									<!-- <el-option label="全部" value=""></el-option> -->
									<el-option v-for="vender in venderList" :key="vender.id" :label="vender.venderName" :value="vender.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="药物状态:" prop="drugstatusId" style="margin-top: 40px;margin-left: -30px;">
								<template>
									<el-radio v-model="drugForm.drugstatusId" label="1">启用</el-radio>
									<el-radio v-model="drugForm.drugstatusId" label="2">禁用</el-radio>
								</template>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>
			<el-footer>
				<div style="margin-left: 800px;">
					<el-button @click="handleRulesForm('drugForm')" style="background-color: #666ee8;color: white;font-size: 16px;">
						<i class="el-icon-s-claim"></i>保存
					</el-button>
					<el-button @click="returnPre" plain style="color: #666ee8;font-size: 16px;">
						<i class="el-icon-refresh-left"></i>返回
					</el-button>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				venderList:[],
				drugtypeList: [],
				drugForm: {},
				rulesDrugForm: {
					name: [{
							required: true,
							message: '请输入药品名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 20,
							message: '长度在 1 到 20 个字符',
							trigger: 'blur'
						}
					],
					specification: [{
						required: true,
						message: '请输入药品规格',
						trigger: 'blur'
					}],
					drugtypeId: [{
						required: true,
						message: '请选择药品类别',
						trigger: 'change'
					}],
					inprice: [{
						required: true,
						message: '请输入采购价',
						trigger: 'blur'
					}],
					outprice: [{
						required: true,
						message: '请输入零售价',
						trigger: 'blur'
					}],
					venderId: [{
						required: true,
						message: '请输入生产厂家',
						trigger: 'change'
					}],
					drugstatusId: [{
						required: true,
						message: '请选择药物状态',
						trigger: 'change'
					}],
				}
			};
		},
		created() {
			this.initDrugtypeList();
			this.initVenderList();
			this.initData();
		},
		methods: {
			initData() {
				if (this.$route.query.upd) {
					this.drugForm = this.$route.query.drugData;
					console.log(this.drugForm);
					this.drugForm.drugstatusId = this.$route.query.drugData.drugstatusId+'';
				} else {
					this.initDrugnumber();
				}
			},
			handleRulesForm(drugForm) {
				this.$refs[drugForm].validate((valid) => {
					if (valid) {
						if (this.$route.query.upd) {
							this.updData();
						} else {
							this.saveData();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			saveData() {
				console.log(this.drugForm);
				this.axios.post('http://localhost:9999/drug/drug/addDrug', this.drugForm).then(res => {
					if (res.status == 200) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						this.initDrugnumber();
						location.reload();
					}
				})
			},
			updData() {
				this.axios.post('http://localhost:9999/drug/drug/updDrug', this.drugForm).then(res => {
					if (res.status == 200) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
					}
				})
			},
			initDrugnumber() {
				this.axios.get('http://localhost:9999/drug/drug/getLastDrugnumber').then(res => {
					if (res.data) {
						this.drugForm.drugnumber = res.data.obj;
					}
				})
			},
			initDrugtypeList() {
				this.axios.get('http://localhost:9999/drug/drugtype/list').then(res => {
					if (res.data) {
						this.drugtypeList = res.data.obj;
					}
				})
			},
			initVenderList(){
				this.axios.get('http://localhost:9999/drug/vender/list').then(res => {
					if (res.data) {
						this.venderList = res.data.obj;
					}
				})
			},
			returnPre() {
				this.$router.replace({
					path: '/drug'
				});
			}
		}
	};
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		/* background-color: #E9EEF3; */
		background-color: white;
		color: #333;
		text-align: center;
		line-height: -10000px;
		height: 500px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
